<!DOCTYPE html>
<html>
<head>
    <title>个人训练评估</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console1.css') }}"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div id="score_1" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>

    <div class="layui-col-xs6 layui-col-md1_5">
            <div class="layui-card top-panel">
                    <div class="layui-card-header", style="left: -15%">作训时长</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md12 top-panel-number" style="color: #28333E, font-size:10;" id="value1">
                            {{ t_min }} 分钟 {{ t_sec }} 秒
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md1_5">
            <div class="layui-card top-panel">
                <div class="layui-card-header", style="left: -15%">情绪评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E, font-size:10;" id="value2">
                            6
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md1_5">
            <div class="layui-card top-panel">
                <div class="layui-card-header", style="left: -15%">行为评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E, font-size:10;" id="value3">
                            7
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md1_5">
            <div class="layui-card top-panel">
                <div class="layui-card-header", style="left: -15%">体征评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E, font-size:10;" id="value4">
                            8
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md1_5">
            <div class="layui-card top-panel">
                <div class="layui-card-header", style="left: -15%">姿态评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E, font-size:10;" id="value4">
                            5
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">

                        </div>
                    </div>
                </div>
            </div>
        </div>


<!--        <div class="main-container">-->
<!--             <div class="layui-card-body">-->
<!--                <table id="dict-records-table" lay-filter="dict-records-table"></table>-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-col-md12">
        <div id="tree" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>
    </div>



</form>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

<script>


layui.use(['layer', 'echarts', 'element', 'count'], function () {
var chartDom = document.getElementById('score_1');
var myChart = echarts.init(chartDom);
var option;
var name = '张三'
setTimeout(function () {
  option = {
    title: {
        text: '个人训练评估',
        subtext: '作训警员: '+name,
        left: 'center',
        textStyle:{
            fontSize: 22
        }
<!--        subtextStyle:{-->
<!--            color: red,-->
<!--            fontSize: 15-->
<!--        }-->
    },
    legend: {
        "orient": "vertical",
        "left": "left",
        "data": ["", "情绪状态评估得分", "行为规范评估得分", "体征况况评估得分", "动作姿态评估得分"],
        "textStyle": {
            "fontSize": 15
        }

    },
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['训练科目', '{{ t1 }}', '{{ t2 }}', '{{ t3 }}', '{{ t4 }}', '{{ t5 }}', '{{ t6 }}'],
        ['情绪状态评估得分', 5, 8, 8, 7, 5, 8],
        ['行为规范评估得分', 5, 5, 5, 5, 7, 6],
        ['体征况况评估得分', 4, 6, 6, 3, 4, 3],
        ['动作姿态评估得分', 2, 3, 4, 1, 3, 4]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: {
        top: '35%',
        x: 30,
<!--        y: 50,-->
        x2: 500
    },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '45%',
        center: ['85%', '55%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@10分钟} ({d}%)',
          textStyle: {
<!--            fontSize: 18-->
        }
        },
        encode: {
          itemName: '训练科目',
          value: '10分钟',
          tooltip: '10分钟'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

option && myChart.setOption(option);
})





</script>
</body>
</html>